<template>
  <h3>data改写</h3>
  <p>count: {{ count }}</p>

  <p>name: {{ data.name }}</p>
  <button @click="fn">btn</button>
</template>

<!-- <script>
// 响应式变量需要从vue里面引入ref函数
import { ref } from "vue";

export default {
  setup() {
    // ref里面要写变量的初始值
    // 当前的count不是初始值，是一个对象。对象里面的value是这个初始值
    const count = ref(123);
    return { count };
  },
};
</script> -->

<script setup>
import { ref, reactive } from "vue";

const count = ref(123);

// const name = ref("zhangsan");

// reactive也可以用来定义变量，里面一般写一个对象
// 用reactive创建的变量，在使用和修改的时候，不需要使用.value

// reactive可以一次性定义多个变量
// 一般情况下都用ref来创建。只有在form表单的时候，再考虑reactive
const data = reactive({
  name: "zhangsan",
});
const fn = () => {
  data.name = "lisi";
};
</script>
